<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fc="http://fctracker.com/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
	<ui:composition id="recipeData">
		<h:outputStylesheet library="css" name="recipes.css" />
		<h:form id="recipesForm">
			<h:panelGroup id="recipesLayout" layout="block">
				<h:panelGroup layout="block">
					<h2>#{recipe.name}
						(#{recipe.dose} adag)</h2>

					<p:fieldset legend="Tulajdonságok" toggleable="true">
						<p:panelGrid columns="7">
							<p:outputLabel value="Kalória" />
							<p:outputLabel value="Fehérje" />
							<p:outputLabel value="Szénhidrát" />
							<p:outputLabel value="Zsír" />
							<p:outputLabel value="Rost" />
							<h:outputLabel value="Ár" />
							<h:outputLabel value="Elkészítés" />

							<h:outputText value="#{recipe.sumCalorie} kcal" />
							<h:outputText value="#{recipe.sumProtein} g" />
							<h:outputText
								value="#{recipe.sumCarbohydrate} g" />
							<h:outputText value="#{recipe.sumFat} g" />
							<h:outputText value="#{recipe.sumFiber} g" />
							<p:rating value="#{recipe.priceRating}"
								readonly="true" />
							<p:rating value="#{recipe.preparationRating}"
								readonly="true" />
						</p:panelGrid>
					</p:fieldset>

					<p:fieldset legend="Hozzávalók" toggleable="true"
						style="margin-top: 10px">
						<h:panelGroup id="ingredientsdiv" layout="block">
							<p:dataList value="#{recipe.ingredients}"
								paginator="true" rows="10" paginatorAlwaysVisible="false"
								paginatorTemplate="{PreviousPageLink} {NextPageLink}"
								paginatorPosition="bottom" itemType="none" var="ingredient"
								emptyMessage="N/A">
								<column> <p:commandButton update=":foodDataDialog"
									icon="ui-icon-search"
									oncomplete="PF('foodDataDialogWidget').show()">
									<f:setPropertyActionListener value="#{ingredient}"
										target="#{recipeController.ingredientToShow}" />
								</p:commandButton> </column>
								<column>#{ingredient.food.name}</column>
								<column> - #{ingredient.quantity} </column>
								<column>#{ingredient.food.unitOfMeasurement.name}</column>

							</p:dataList>
						</h:panelGroup>
					</p:fieldset>

					<p:fieldset legend="Elkészítés" toggleable="true"
						style="margin-top: 10px"
						visible="#{recipe.description != null}">
						<!-- escape="false" miatt ez html-ként érzékeli a value-t és aszerint jeleníti meg -->
						<h:outputText escape="false"
							value="#{recipe.description}" />
					</p:fieldset>
				</h:panelGroup>

			</h:panelGroup>
		</h:form>


		<p:dialog id="foodDataDialog" widgetVar="foodDataDialogWidget"
			dynamic="true" showEffect="clip" hideEffect="clip"
			closeOnEscape="true" resizable="false"
			header="#{recipeController.ingredientToShow.food}">
			<!--  TODO -->
			<fc:foodData food="#{recipeController.ingredientToShow.food}"
				showName="false" />
		</p:dialog>

	</ui:composition>
</h:body>
</html>